<template>
  <view class="page page-aftersale-logistics">
    <view class="logistics-map" v-if="logisticsData.trailUrl">
      <iframe :src="logisticsData.trailUrl" frameborder="0"></iframe>
    </view>
    <view class="logistics-info">
      <view class="logistics-info-header">
        <image :src="orderData.imgUrl" class="order-image" mode=""></image>
        <fui-text text="运输中" size="32" color="#333"></fui-text>
      </view>
      <view class="logistics-info-description">
        <fui-text :text="'物流单号：' + logisticsNumber" size="28" color="#333"></fui-text>
        <fui-text text="复制" size="28" color="#999" @click="handleCopy(logisticsNumber)"></fui-text>
      </view>
      <view class="logistics-info-content">
        <fui-steps v-if="logisticsData.trailUrl" :items="logisticsItems" :current="0" direction="column" :isMark="false" itemGap="24" activeColor="#fe8737" processColor="#fe8737" color="#999999" descrColor="#999999"></fui-steps>
        <fui-empty v-else src="/static/images/empty/search.png" :title="errorMsg" width="280" height="160" marginTop="120" size="24" color="#999"></fui-empty>
      </view>
      <view class="logistics-info-footer">
        <view class="order-receipt">收</view>
        <view class="order-info">
          <view class="order-info-address">{{ orderData.receiverAreaName }} {{ orderData.receiverDetailAddress }}</view>
          <view class="order-info-user">{{ orderData.receiverName }}, {{ orderData.receiverMobile }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import orderApi from '@/api/order'

const tab = inject('$tab')
const modal = inject('$modal')

// 订单信息
const orderId = ref(null)
const deliveryId = ref()
const orderData = ref({})
const getOrderDetail = () => {
  try {
    orderApi.getOrderDetail(orderId.value).then((res) => {
      if (res.code === 0) {
        orderData.value = {
          ...res.data,
          title: res.data.items[0].spuName,
          imgUrl: res.data.items[0].picUrl
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.msgError('获取订单统计数据失败')
  }
}

// 物流信息
const errorMsg = ref('获取物流信息失败！')
const logisticsData = ref({})
const logisticsItems = ref([])
const getOrderLogistics = () => {
  try {
    orderApi.getOrderLogistics(deliveryId.value).then(res => {
      if (res.data) {
        if (res.data.status == 200) {
          logisticsData.value = res.data
          logisticsItems.value = res.data.data.map(item => {
            return {
              title: `${item.status} ${item.time}`,
              descr: item.context,
              src: ''
            }
          })
        } else {
          errorMsg.value = res.data.message || '获取物流信息失败！'
        }
      } else {
        errorMsg.value = '获取物流信息失败！'
      }
    })
  } catch {
    errorMsg.value = '获取物流信息失败！'
  }
}

// 复制事件
const handleCopy = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 1500,
      })
    },
    fail: (err) => {
      console.error("复制失败", err)
    },
  })
}
const logisticsNumber = ref()
onLoad(option => {
  orderId.value = option.orderId,
  deliveryId.value = option.deliveryId,
  logisticsNumber.value = option.logisticsNumber,
  console.log("option",option)
  getOrderDetail()
  getOrderLogistics()
})
</script>

<style lang="scss" scoped>
.page-aftersale-logistics {
  position: relative;
  width: 100%;
  height: calc(100vh - 80rpx);
  background-color: #eef1f7;
  .logistics-map {
    width: 100%;
    height: 60vh;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
  .logistics-info {
    position: absolute;
    left: 10rpx;
    right: 10rpx;
    bottom: 0;
    height: 50vh;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .8);
    border-top-left-radius: 36rpx;
    border-top-right-radius: 36rpx;
    margin-top: -10vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .logistics-info-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      background-color: #F9F9F9;
      padding: 24rpx 32rpx;
      .order-image {
        width: 60rpx; 
        height: 60rpx; 
        overflow: hidden;
        border-radius: 8rpx; 
        background-color: #eee;
        margin-right: 16rpx;
      }
    }
    .logistics-info-description {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 24rpx 48rpx 10rpx;
    }
    .logistics-info-content {
      flex: 1;
      overflow: auto;
      background-color: #fff;
      padding: 24rpx 32rpx;
    }
    .logistics-info-footer {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-top: 2rpx solid #E8E8E8;
      margin: 0 24rpx;
      padding: 24rpx 32rpx;
      .order-receipt {
        flex: 0 0 52rpx;
        width: 52rpx;
        height: 52rpx;
        border-radius: 26rpx;
        background: #FE8737;
        margin-right: 12rpx;
        line-height: 52rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
      }
      .order-info {
        flex: 1;
        font-size: 24rpx;
        color: #333;
        .order-info-address {
          margin-bottom: 16rpx;
        }
      }
    }
  }
}
</style>
